<template>
	<view class="integral">
		<!-- <image src='@/static/img/inte-bg.png' mode=""></image> -->
		<view class="search_top_back">
			<view class="search_top_nav">
				<view :style="{ height: statusBarHeight }" class="status_bar"></view>
				<view class="search_nav_content">
					<view @click="back" style="width: 76rpx; height: 88rpx">
						<image style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
							src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"></image>
					</view>
					<label class="search_title">我的积分</label>
				</view>
			</view>
			<view class="integral-num">
				<view class="integral-title">可用积分</view>
				<view class="integral-count">{{ score || 0 }}</view>
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<!-- <view style="height: 88rpx;"></view> -->
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view style="height: 88rpx;"></view> -->
		<!-- #endif -->
		<view class="integral-main" style="position: relative">
			<view class="integral-main-top">
				<view class="integral-main-top-item" @click="tabType(1)" :class="Type == 1 ? 'on' : ''">
					<text></text>
					积分行为
				</view>
				<view class="integral-main-top-item" @click="tabType(2)" :class="Type == 2 ? 'on' : ''">
					<text></text>
					积分记录
				</view>
			</view>

			<view class="integral-main-content" style="padding: 10rpx 0 100rpx; background-color: #fff"
				v-if="Type == 1">
				<navigator url="/packageMine/pages/grade/gradeDetail" hover-class="none" class="integral-main-item">
					<view class="integral-main-left">
						<view class="integral-main-left_title">积分奖励</view>
						<view>积分可兑换现金或其他优惠权益</view>
					</view>
					<view class="integral-main-right">
						<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image>
					</view>
				</navigator>
				<navigator url="/pages/ranking/ranking" open-type="switchTab" class="integral-main-item">
					<view class="integral-main-left">
						<view class="integral-main-left_title">减重排名</view>
						<view>每日/周/月减重排行前3可获得相应积分</view>
					</view>
					<view class="integral-main-right">
						<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image>
					</view>
				</navigator>
				<navigator url="/pages/home/home" hover-class="none" open-type="switchTab" class="integral-main-item">
					<view class="integral-main-left">
						<view class="integral-main-left_title">每日称重</view>
						<view>每日首次使用体脂秤称重可获得{{ sysconfig.dailyWeight }}积分</view>
					</view>
					<view class="integral-main-right">
						<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image>
					</view>
				</navigator>

				<navigator url="/pages/community/community" hover-class="none" open-type="switchTab"
					class="integral-main-item">
					<view class="integral-main-left">
						<view class="integral-main-left_title">发布动态</view>
						<view>发布动态可获得{{ sysconfig.publishTrends }}积分，每日最多{{
                                sysconfig.publishTrendsLimit
                            }}次</view>
					</view>
					<view class="integral-main-right">
						<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image>
					</view>
				</navigator>

				<navigator url="/packageHome/pages/story/story" hover-class="none" class="integral-main-item">
					<view class="integral-main-left">
						<view class="integral-main-left_title">发布用户故事</view>
						<view>每日发布用户故事可获得{{ sysconfig.publishStory }}积分，每日最多{{
                                sysconfig.publishStoryLimit
                            }}次</view>
					</view>
					<view class="integral-main-right">
						<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image>
					</view>
				</navigator>

				<navigator url="/packageMine/pages/invite/index" hover-class="none" class="integral-main-item">
					<view class="integral-main-left">
						<view class="integral-main-left_title">新用户注册</view>
						<view>新用户注册获得{{ shareAward.inviteAward||'0' }}积分</view>
					</view>
					<view class="integral-main-right">
						<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""></image>
					</view>
				</navigator>
			</view>

			<view class="integral-main-content" style="height:100%;padding: 10rpx 0 0; background-color: #fff" v-if="Type == 2">
                <date-time-picker :time="time" @confirm="onConfirm"/>
                <view v-if="ScroeList.length">
                    <block v-for="(item, index) in ScroeList" :key="index">
                        <view class="integral-main-item">
                            <view class="integral-main-left">
                                <view class="integral-main-left_title">{{ item.remark }}</view>
                                <view class="integral-main-right1" v-if="item.remark == '购物积分抵扣' || item.remark == '积分抵扣'">
                                    订单编号：{{ item.bussKey }}</view>
                                <view class="integral-main-right1" v-if="item.remark === '邀请新用户注册'">
                                    {{ item.bussKey }}
                                </view>
                                <view>{{ item.updateTime }}</view>
                            </view>
                            <view class="integral-main-right">{{ (item.changeType == 0 ? '+' : '-') + item.score }}</view>
                        </view>
                    </block>
                </view>
				<view v-else style="height:70%">
					<empty  />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				Type: 1,
				score: 0,
				pageNum: 1,
				pageSize: 20,
				isloading: false,
				total: 0,
				ScroeList: [],
				sysconfig: '',
				shareAward: {},
                time:[]
			};
		},
		onLoad(options) {
			this.score = options.score;
			this.getScroeList(true);
			this.getsysconfig();
			this.getDetail()
		},

		onPullDownRefresh() {
			this.getsysconfig();
			this.getScroeList(true);
			this.getDetail()
		},
		//  onReachBottom() {
		//    if (this.more == false) return
		//    this.status = 'loading'
		//    this.pageNum = ++ this.pageNum
		//    this.getScroeList(false)
		// },

		methods: {
			async getDetail() {
				const {
					data
				} = await this.request.httpJsonRequest('/mp-api/wx/mall/config/queryByKey', {
					key: 'shareAward'
				}, 'GET')
				this.shareAward = data || {}
			},
			tabType(e) {
				this.Type = e;
			},
			back() {
				uni.navigateBack();
			},
			getsysconfig() {
				this.request.httpTokenRequest('/mp-api/wx/config/sysconfig', null, 'POST', false).then((res) => {
					if (res.code != 0) {
						this.helper.showToast(res.message);
						return;
					}
					this.sysconfig = res.data;
				});
			},
			getScroeList(isFresh) {
                const [beginTime,endTime]=this.time
				this.request.httpTokenRequest('/mp-api/wx/my/score/list', {
                    beginTime:beginTime?`${beginTime.replaceAll('/','-')} 00:00:00`:undefined,
                    endTime:endTime?`${endTime.replaceAll('/','-')} 23:59:59`:undefined
                }, 'POST', false).then((res) => {
					uni.stopPullDownRefresh();
					if (res.code == 0) {
						this.ScroeList = res.data.list.reverse();
					}
				});
			},
            onConfirm(time){
                this.time=time;
                this.getScroeList(true);
            }
		},
	};
</script>

<style lang="scss" scoped>
	body,
	.integral {
		height: 100%;
		min-height: 100vh;
		background-position: center;
		background-color: #e0ede9;
	}

	uni-page-body,
	html {
		height: 100%;
		background-color: #e0ede9;
	}

	.search_top_back {
		background-image: url("https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/inte-bg.png");
		height: 496rpx;
		position: relative;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.integral-main-right1 {
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		white-space: nowrap
	}

</style>
